import { Button, message, Input, Modal, Form, Popconfirm, InputNumber } from 'antd';
import React, { useState, useRef } from 'react';
import { useIntl, FormattedMessage } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';

import { getDataConfigList, addDataConfig, updateDataConfig, removeDataConfig } from '@/services';

const DataConfig = () => {
  const intl = useIntl();
  const actionRef = useRef(null);
  const [visible, setVisible] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [updateId, setUpdateId] = useState(null);

  const [title, setTitle] = useState(
    intl.formatMessage({
      id: 'pages.add',
    }),
  );

  const [form] = Form.useForm();

  const handleAdd = () => {
    setVisible(true);
    setTitle(
      intl.formatMessage({
        id: 'pages.add',
      }),
    );
  };
  const handleUpdate = (record) => {
    setVisible(true);
    setTitle(
      intl.formatMessage({
        id: 'pages.update',
      }),
    );
    setUpdateId(record.id);
    form.setFieldsValue(record);
  };
  const handleRemove = async (record) => {
    const res = await removeDataConfig({ id: record.id });
    if (res) {
      message.success(
        intl.formatMessage({
          id: 'pages.success',
        }),
      );
      actionRef?.current?.reload();
    }
  };
  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
    setUpdateId(null);
  };

  const handleOk = async () => {
    await form.validateFields();
    let values = form.getFieldsValue();
    setSubmitting(true);
    const func = updateId ? updateDataConfig : addDataConfig;
    const res = await func({
      id: updateId,
      ...values,
    });
    if (res) {
      message.success(
        intl.formatMessage({
          id: 'pages.success',
        }),
      );
      handleCancel();
      actionRef?.current?.reload();
    }
    setSubmitting(false);
  };

  const columns = [
    {
      title: <FormattedMessage id="pages.dataConfig.code" defaultMessage="近红外编码" />,
      dataIndex: 'code',
      width: 100,
      fixed: 'left',
    },
    {
      title: <FormattedMessage id="pages.dataQuery.checkPoint" defaultMessage="检测点" />,
      dataIndex: 'location',
      search: false,
      width: 100,
      fixed: 'left',
    },

    {
      title: <FormattedMessage id="pages.dataConfig.desc" defaultMessage="近红外描述" />,
      dataIndex: 'desc',
      ellipsis: true,
    },

    {
      title: <FormattedMessage id="pages.dataQuery.linkSql" defaultMessage="中控链接SQL" />,
      dataIndex: 'linkSql',
      search: false,
      ellipsis: true,
    },

    {
      title: <FormattedMessage id="pages.dataQuery.centralHost" defaultMessage="中控数据库Host" />,
      dataIndex: 'centralHost',
      search: false,
      ellipsis: true,
    },
    {
      title: (
        <FormattedMessage id="pages.dataQuery.centralDbName" defaultMessage="中控数据库名称" />
      ),
      dataIndex: 'centralDbName',
      search: false,
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.centralUser" defaultMessage="中控数据库账户" />,
      dataIndex: 'centralUser',
      search: false,
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.centralPwd" defaultMessage="中控数据库密码" />,
      dataIndex: 'centralPwd',
      search: false,
      ellipsis: true,
    },

    {
      title: <FormattedMessage id="pages.dataQuery.host" defaultMessage="红外数据库Host" />,
      dataIndex: 'host',
      search: false,
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.dbName" defaultMessage="红外数据库名称" />,
      dataIndex: 'dbName',
      search: false,
      ellipsis: true,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.headDiscard" defaultMessage="前弃数据条数" />,
      dataIndex: 'headDiscard',
      search: false,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.endDiscard" defaultMessage="后弃数据条数" />,
      dataIndex: 'endDiscard',
      search: false,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 200,
      render: (_, record) => [
        <Button key="update" size="small" onClick={() => handleUpdate(record)} type="success">
          <FormattedMessage id="pages.update" defaultMessage="修改" />
        </Button>,
        <Popconfirm
          key="delete"
          title={<FormattedMessage id="pages.delete_confirm" />}
          onConfirm={() => handleRemove(record)}
        >
          <Button size="small" type="danger">
            <FormattedMessage id="pages.delete" defaultMessage="删除" />
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  const queryList = async (params) => {
    const res = await getDataConfigList({
      ...params,
    });
    if (res) {
      return res;
    }
  };

  return (
    <PageContainer>
      <ProTable
        scroll={{ x: 2000 }}
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 80,
        }}
        toolBarRender={() => [
          <Button key="add" type="primary" onClick={handleAdd}>
            <FormattedMessage id="pages.add" defaultMessage="增加" />
          </Button>,
        ]}
        request={(params, sorter, filter) => queryList({ ...params })}
        columns={columns}
      />

      <Modal
        title={title}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={submitting}
      >
        <Form form={form} labelCol={{ span: 8 }} style={{ height: 400, overflow: 'auto' }}>
          <Form.Item
            label={<FormattedMessage id="pages.dataConfig.code" defaultMessage="近红外编码" />}
            name="code"
            rules={[
              { required: true, message: intl.formatMessage({ id: 'pages.dataConfig.p_code' }) },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={<FormattedMessage id="pages.dataConfig.desc" defaultMessage="近红外描述" />}
            name="desc"
            rules={[
              { required: true, message: intl.formatMessage({ id: 'pages.dataConfig.p_desc' }) },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={<FormattedMessage id="pages.dataQuery.checkPoint" defaultMessage="检测点" />}
            name="location"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_checkPoint' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={<FormattedMessage id="pages.dataQuery.linkSql" defaultMessage="中控链接SQL" />}
            name="linkSql"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_linkSql' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={
              <FormattedMessage id="pages.dataQuery.centralHost" defaultMessage="中控数据库Host" />
            }
            name="centralHost"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_centralHost' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={
              <FormattedMessage
                id="pages.dataQuery.centralDbName"
                defaultMessage="中控数据库名称"
              />
            }
            name="centralDbName"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_centralDbName' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={
              <FormattedMessage id="pages.dataQuery.centralUser" defaultMessage="中控数据库账户" />
            }
            name="centralUser"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_centralUser' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={
              <FormattedMessage id="pages.dataQuery.centralPwd" defaultMessage="中控数据库密码" />
            }
            name="centralPwd"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_centralPwd' }),
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label={<FormattedMessage id="pages.dataQuery.host" defaultMessage="红外数据库Host" />}
            name="host"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_host' }),
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={<FormattedMessage id="pages.dataQuery.dbName" defaultMessage="红外数据库名称" />}
            name="dbName"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_dbName' }),
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={
              <FormattedMessage id="pages.dataQuery.headDiscard" defaultMessage="前弃数据条数" />
            }
            name="headDiscard"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_headDiscard' }),
              },
            ]}
          >
            <InputNumber min={0} />
          </Form.Item>
          <Form.Item
            label={
              <FormattedMessage id="pages.dataQuery.endDiscard" defaultMessage="后弃数据条数" />
            }
            name="endDiscard"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.dataQuery.p_endDiscard' }),
              },
            ]}
          >
            <InputNumber min={0} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default DataConfig;
